<template>
  <view class="page">
    <view
      class="card"
      v-for="(item, index) in list"
      :key="index"
      @click="jumpDatail(item)"
    >
      <view class="ful">
        <view class="ful_left"> 状态 </view>
        <view class="ful_right">
          {{ item.status == 1 ? "已完成" : "未完成" }}
        </view>
      </view>
      <view class="ful border">
        <view class="ful_left"> 结单时间 </view>
        <view class="ful_right">
          {{ item.statementtime_text || "无" }}
        </view>
      </view>
      <view class="dis">
        <view class="btn"> 详情 </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      page: 1,
      list: [],
      last_page: null,
    };
  },
  onLoad(e) {
    this.id = e.id;
  },
  onShow() {
    if (this.id) {
      this.page = 1;
      this.list = [];
      this.last_page = null;
      this.getList();
    }
  },
  methods: {
    getList() {
      this.$https
        .post("/warranty/mainten", {
          warranty_id: this.id,
          page: this.page,
        })
        .then((res) => {
          this.last_page = res.data.last_page;
          this.list = this.list.concat(res.data.data);
        });
    },
    jumpDatail(item) {
      uni.navigateTo({
        url:
          "/pages/report_detail/report_detail?service_id=" +
          item.id +
          "&warranty_id=" +
          item.warranty_id,
      });
    },
  },
  onReachBottom() {
    if (this.page != this.last_page) {
      this.page = this.page + 1;
      this.getList();
    }
  },
};
</script>

<style lang="scss" scoped>
.dis {
  display: flex;
  justify-content: flex-end;
  padding: 10rpx;
}
.btn {
  font-size: 28rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #1a66ff;
  padding: 6rpx 32rpx;
  border-radius: 32rpx;
  opacity: 1;
  border: 2px solid #1a66ff;
}
.border {
  border-bottom: 2rpx solid #f7f8fb;
}

.page {
  background-color: #f7f8fb;
  min-height: 100vh;
}

.ful {
  display: flex;
  justify-content: space-between;
}

.ful_left {
  color: #303030;
  padding: 20rpx;
}

.ful_right {
  padding: 20rpx;
}

.card {
  font-size: smaller;
  color: #999999;

  margin: 30rpx;
  background-color: #fff;
  padding: 10rpx;
  border-radius: 10rpx;
  box-shadow: 10rpx 10rpx 10rpx 10rpx;
}
</style>
